<template>
  <div>
    <el-card class="box-card" shadow="never">
      <div slot="header" class="clearfix">
        <span class="card-title">{{ title }}</span>
        <el-button
          style="float: right"
          size="mini"
          type="primary"
          @click="() => handleSave(false)"
          >保存</el-button
        >
        <el-button
          style="float: right; margin-right: 10px"
          size="mini"
          v-if="!this.id"
          @click="() => handleSave(true)"
          >保存并新增</el-button
        >
      </div>
      <div class="text item">
        <el-form
          :model="tag"
          :rules="rules"
          ref="tagForm"
          label-width="100px"
          label-position="left"
        >
          <el-form-item label="编号" prop="code">
            <el-input v-model="tag.code"></el-input>
          </el-form-item>
          <el-form-item label="名称" prop="name">
            <el-input v-model="tag.name"></el-input>
          </el-form-item>
          <el-form-item label="类型" prop="type">
            <tag-type v-model="tag.type"></tag-type>
          </el-form-item>
        </el-form>

        <div v-if="tag.type === $enums.tagType.list.value">
          <el-divider></el-divider>
          <div>
            <span>项目</span
            ><span
              ><el-button
                size="mini"
                type="primary"
                icon="el-icon-plus"
                circle
                style="margin-left: 10px"
                @click="handleAddItem"
              ></el-button
            ></span>
          </div>
          <div v-for="(item, index) in tag.items" :key="index">
            <label for="type" class="tag-item-label" style="width: 100px"
              >代码</label
            ><span style="padding-left: 10px; padding-right: 10px"
              ><el-input
                v-model="item.code"
                size="mini"
                style="width: 120px"
              ></el-input></span
            ><label for="type" class="tag-item-label" style="width: 100px"
              >名称</label
            ><span style="padding-left: 10px; padding-right: 10px"
              ><el-input
                v-model="item.name"
                size="mini"
                style="width: 120px"
              ></el-input
            ></span>
            <span style="padding-left: 10px"
              ><el-button
                type="danger"
                icon="el-icon-delete"
                circle
                size="mini"
                @click="() => handleDeleteItem(item)"
              ></el-button
            ></span>
          </div>
        </div>
      </div>
    </el-card>
  </div>
</template>
<script>
import { getTag, addTag, updateTag, deleteTagItem } from "@/api/tag";
import tagType from "@/components/Select/tagTypeSelect.vue";
export default {
  components: {
    tagType,
  },
  data() {
    return {
      tag: { id: "", code: "", name: "", type: null, items: null },
      rules: {
        code: [{ required: true, message: "请填写编号", trigger: "blur" }],
        name: [{ required: true, message: "请填写名称", trigger: "blur" }],
      },
      title: "",
    };
  },
  methods: {
    getData() {
      if (!this.id) return;
      getTag(this.id).then((res) => {
        this.tag = res || {};
      });
    },
    handleSave(afterAdd) {
      this.$refs.tagForm.validate((valid) => {
        if (valid) {
          this.saveData(afterAdd);
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    saveData(afterAdd) {
      if (!this.id) {
        addTag(this.tag).then((res) => {
          if (!res) return;
          this.$notify({
            title: "成功",
            message: "保存成功",
            type: "success",
            position: "bottom-right",
          });
          if (afterAdd) {
            this.tag = {};
          } else {
            this.$emit("refresh", res);
          }
        });
      } else {
        updateTag(this.tag).then((res) => {
          if (!res) return;
          this.$notify({
            title: "成功",
            message: "保存成功",
            type: "success",
            position: "bottom-right",
          });
          if (afterAdd) {
            this.tag = {};
          } else {
            this.$emit("refresh", res);
          }
        });
      }
    },
    handleAddItem() {
      this.tag.items = this.tag.items || [];
      this.tag.items.push({ id: "", code: "", name: "" });
    },
    handleDeleteItem(item) {
      if (!item.id) {
        this.tag.items = this.tag.items.remove(item);
        return;
      }

      this.$confirm(this.$t("tips.confirmDelete"), this.$t("common.tips"), {
        confirmButtonText: this.$t("common.ok"),
        cancelButtonText: this.$t("common.cancel"),
        type: "warning",
      })
        .then(() => {
          deleteTagItem(this.tag.id, item.id).then((res) => {
            this.tag.items = this.tag.items.remove(item);
          });
        })
        .catch(() => {});
    },
  },
  mounted() {
    this.title = this.id ? "编辑" : "新增";
    this.getData();
  },
  props: {
    id: {
      type: String,
      default: "",
    },
  },
};
</script>
<style scoped>
.tag-item-label {
  text-align: left;
  vertical-align: middle;
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
</style>
